<template>
	<div class="footerNav">
		<div>
			<router-link to="/" class="home">
				<i class="iconfont icon-home"></i>
				<span>首页</span>
			</router-link>
		</div>
		<div>
			<router-link :to="{path:'/more', query:{listId:1}}" class="home">
				<i class="iconfont icon-fenlei"></i>
				<span>分类</span>
			</router-link>
		</div>
		<div>
			<router-link to="/cartlist" class="home">
				<strong v-if="cartStatus">{{updataCartNum}}</strong>
				<strong v-else>{{cartNum}}</strong>
				<i class="iconfont icon-gouwuche"></i>
				<span>购物车</span>
			</router-link>
		</div>
		<div>
			<router-link to="/" class="home">
				<i class="iconfont icon-shouye"></i>
				<span>会员</span>
			</router-link>
		</div>
	</div>
</template>

<script>
export default {
  name: 'Nav',
  data () {
    return {
      cartNum: 0,
      stateNum: 0,
      cartStatus: true
    }
  },
  computed: {
    'updataCartNum': function () {
      this.cartNum = this.$store.state.cartNum /** 时时更新 */
      this.getCartNum()	/** 获取存储的购物车数量 */
      return this.cartNum
    }
  },
  methods: {
    /** 读取缓存中的 购物车数量 由于不好实现购物车时时更新 所以用的store实现 */
    getCartNum: function () {
      var cartNum = sessionStorage.getItem('cartNum')
      if (cartNum !== '' || cartNum !== null) {
        this.cartNum = cartNum
      }
      return this.cartNum
    }
  }
}

</script>

<style scoped>
	.footerNav {
		position: fixed;
		bottom: 0;
		left: 0rem;
		right: 0rem;
		z-index: 100;
		background-color: #fff;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		border-top: 1px solid #ccc;
		padding: 0.1rem 0;
	}

	.footerNav .home {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin: 0 .32rem
	}

	.footerNav .home span {
		font-size: .26rem;
		color: #ff712b;
	}

	.footerNav .home strong {
		position: absolute;
		top: 0;
		right: -0.4rem;
		font-size: .2rem;
		background-color: #FF8B00;
		color: #fff;
		width: .5rem;
		border-radius: .5rem;
		text-align: center;
	}

	.footerNav .home i {
		font-size: .50rem;
		color: #ff712b;
		margin: 0.05rem 0;
	}

</style>
